M

MLOG

Español

Explora el hook useTransition de React para mejorar la UX gestionando estados de carga y priorizando actualizaciones de la interfaz de usuario, logrando aplicaciones más fluidas.

Hook useTransition de React: Mejorando la experiencia del usuario con renderización concurrente

En el panorama en constante evolución del desarrollo web, crear experiencias de usuario fluidas y receptivas es primordial. React, una biblioteca de JavaScript líder para construir interfaces de usuario, introduce constantemente características para ayudar a los desarrolladores a lograr este objetivo. Entre ellas, el hook useTransition destaca como una herramienta poderosa para gestionar los estados de carga y priorizar las actualizaciones de la interfaz de usuario, lo que resulta en interacciones más fluidas y agradables para los usuarios de todo el mundo.

Comprendiendo el problema: Bloqueo de las actualizaciones de la interfaz de usuario

Antes de profundizar en useTransition, es esencial comprender el problema que aborda. En la renderización tradicional de React, las actualizaciones son síncronas. Esto significa que cuando cambia el estado de un componente, React inicia inmediatamente el proceso de renderización, lo que potencialmente bloquea el hilo principal y provoca retrasos notables, especialmente cuando se trata de componentes complejos u operaciones que requieren muchos cálculos. Los usuarios podrían experimentar:

Estos problemas son particularmente problemáticos para los usuarios con conexiones a Internet más lentas o dispositivos menos potentes, lo que impacta negativamente en su experiencia general. Imagine a un usuario en una región con ancho de banda limitado que intenta usar una aplicación con muchos datos: los retrasos causados ​​por las actualizaciones síncronas pueden ser increíblemente frustrantes.

Introducción a useTransition: Una solución para la renderización concurrente

El hook useTransition, introducido en React 18, ofrece una solución a estos problemas al habilitar la renderización concurrente. La renderización concurrente permite que React interrumpa, pause, reanude o incluso abandone las tareas de renderización, lo que hace posible priorizar ciertas actualizaciones sobre otras. Esto significa que React puede mantener la interfaz de usuario receptiva incluso mientras realiza operaciones de larga duración en segundo plano.

Cómo funciona useTransition

El hook useTransition devuelve un array que contiene dos valores:

  1. isPending: Un booleano que indica si una transición está activa.
  2. startTransition: Una función que envuelve la actualización de estado que deseas marcar como una transición.

Cuando llamas a startTransition, React marca la actualización de estado incluida como no urgente. Esto permite que React aplace la actualización hasta que el hilo principal esté menos ocupado, dando prioridad a las actualizaciones más urgentes, como las interacciones del usuario. Mientras la transición está pendiente, isPending será true, lo que te permitirá mostrar un indicador de carga u otra retroalimentación visual al usuario.

Ejemplos prácticos: Mejorando la experiencia del usuario con useTransition

Exploremos algunos ejemplos prácticos de cómo se puede usar useTransition para mejorar la experiencia del usuario en las aplicaciones de React.

Ejemplo 1: Optimización de la funcionalidad de búsqueda

Considera una funcionalidad de búsqueda que filtra un gran conjunto de datos a medida que el usuario escribe. Sin useTransition, cada pulsación de tecla podría activar una nueva renderización, lo que podría provocar una experiencia lenta. Con useTransition, podemos priorizar la actualización del campo de entrada mientras aplazamos la operación de filtrado.


import React, { useState, useTransition } from 'react';

function SearchComponent({
  data //asumir que este es un gran conjunto de datos
}) {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState(data); //conjunto de datos inicial como resultado
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const inputValue = e.target.value;
    setQuery(inputValue); // Actualizar el campo de entrada inmediatamente

    startTransition(() => {
      // Filtrar los datos en una transición
      const filteredResults = data.filter((item) =>
        item.name.toLowerCase().includes(inputValue.toLowerCase())
      );
      setResults(filteredResults);
    });
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleChange} placeholder="Buscar..." />
      {isPending && <p>Buscando...</p>}
      <ul>
        {results.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default SearchComponent;

En este ejemplo, la función handleChange actualiza el estado query inmediatamente, asegurando que el campo de entrada permanezca receptivo. La operación de filtrado, que puede ser costosa computacionalmente, se envuelve en startTransition. Mientras el filtrado está en progreso, el estado isPending es true, lo que nos permite mostrar un mensaje "Buscando..." al usuario. Esto proporciona retroalimentación visual y evita que el usuario perciba el retraso como una falta de capacidad de respuesta.

Ejemplo 2: Optimización de las transiciones de navegación

Las transiciones de navegación también pueden beneficiarse de useTransition. Al navegar entre rutas, especialmente en aplicaciones complejas, puede haber un retraso mientras los componentes se montan y se obtienen datos. Al usar useTransition, podemos priorizar la actualización de la URL mientras aplazamos la renderización del nuevo contenido de la página.


import React, { useState, useTransition } from 'react';
import { useNavigate } from 'react-router-dom';

function NavigationComponent() {
  const navigate = useNavigate();
  const [isPending, startTransition] = useTransition();

  const handleNavigation = (route) => {
    startTransition(() => {
      navigate(route);
    });
  };

  return (
    <nav>
      <button onClick={() => handleNavigation('/home')}>Inicio</button>
      <button onClick={() => handleNavigation('/about')}>Acerca de</button>
      <button onClick={() => handleNavigation('/products')}>Productos</button>
      {isPending && <p>Cargando...</p>}
    </nav>
  );
}

export default NavigationComponent;

En este ejemplo, la función handleNavigation usa startTransition para envolver la función navigate. Esto le dice a React que priorice la actualización de la URL, lo que proporciona retroalimentación inmediata al usuario de que la navegación se ha iniciado. La renderización del nuevo contenido de la página se aplaza hasta que el hilo principal esté menos ocupado, lo que garantiza una experiencia de transición más fluida. Mientras la transición está pendiente, se puede mostrar un mensaje "Cargando..." al usuario.

Ejemplo 3: Galería de imágenes con funcionalidad de carga más

Considera una galería de imágenes que carga imágenes en lotes utilizando un botón "Cargar más". Al cargar un nuevo lote de imágenes, podemos usar useTransition para mantener la interfaz de usuario receptiva mientras se obtienen y renderizan las imágenes.


import React, { useState, useTransition, useCallback } from 'react';

function ImageGallery() {
  const [images, setImages] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isPending, startTransition] = useTransition();
  const [page, setPage] = useState(1);

  const loadMoreImages = useCallback(async () => {
      setIsLoading(true);
      startTransition(async () => {
        // Simula la obtención de imágenes de una API (reemplazar con tu llamada API real)
        await new Promise(resolve => setTimeout(resolve, 500));

        const newImages = Array.from({ length: 10 }, (_, i) => ({
          id: images.length + i + 1,
          src: `https://via.placeholder.com/150/${Math.floor(Math.random() * 16777215).toString(16)}` // Imagen de marcador de posición aleatoria
        }));

        setImages(prevImages => [...prevImages, ...newImages]);
        setPage(prevPage => prevPage + 1);

      });
      setIsLoading(false);
  }, [images.length]);

  return (
    <div>
      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
        {images.map(image => (
          <img key={image.id} src={image.src} alt={`Imagen ${image.id}`} style={{ margin: '5px' }} />
        ))}
      </div>
      {isLoading ? (
        <p>Cargando más imágenes...</p>
      ) : (
        <button onClick={loadMoreImages} disabled={isPending}>
          {isPending ? 'Cargando...' : 'Cargar más'}
        </button>
      )}
    </div>
  );
}

export default ImageGallery;

En este ejemplo, al hacer clic en el botón "Cargar más" se activa la función loadMoreImages. Dentro de esta función, envolvemos la actualización de estado que agrega las nuevas imágenes a la galería usando startTransition. Mientras se cargan y renderizan las imágenes, isPending se establece en verdadero, el botón se deshabilita, lo que impide múltiples clics, y el texto cambia a "Cargando...". Después de que finaliza la carga, se renderizan las imágenes y isPending vuelve a ser falso. Esto proporciona una indicación visual de que se están cargando más imágenes e impide que el usuario haga doble clic en el botón, lo que podría causar un comportamiento inesperado.

Mejores prácticas para usar useTransition

Para aprovechar eficazmente el hook useTransition, considera las siguientes mejores prácticas:

Consideraciones globales: Adaptación de la UX para audiencias diversas

Al desarrollar aplicaciones web para una audiencia global, es fundamental considerar las diversas necesidades y expectativas de los usuarios de diferentes regiones y culturas. Aquí hay algunas consideraciones globales para usar useTransition y optimizar la experiencia del usuario:

Más allá de useTransition: Optimizaciones adicionales

Si bien useTransition es una herramienta valiosa, es solo una pieza del rompecabezas. Para optimizar verdaderamente la experiencia del usuario, considera las siguientes estrategias adicionales:

Conclusión: Adoptando la renderización concurrente para un futuro mejor

El hook useTransition representa un paso significativo en el desarrollo de React, lo que permite a los desarrolladores crear experiencias de usuario más receptivas y atractivas. Al comprender los principios de la renderización concurrente y aplicar las mejores prácticas, puedes aprovechar useTransition para optimizar tus aplicaciones y brindar una experiencia fluida a los usuarios de todo el mundo. Recuerda considerar factores globales como las condiciones de la red, las capacidades de los dispositivos y las sensibilidades culturales para crear aplicaciones web verdaderamente inclusivas y accesibles.

A medida que React continúa evolucionando, adoptar nuevas características como useTransition es crucial para mantenerse a la vanguardia y ofrecer experiencias de usuario excepcionales que satisfagan las demandas de una audiencia diversa y global. Al priorizar el rendimiento, la accesibilidad y la sensibilidad cultural, puedes crear aplicaciones web que no solo sean funcionales sino también agradables de usar para todos.